<template>
  <div class="App">
    App
    <Teleport :to="'body'" :disabled="flag">
      <Child></Child>
    </Teleport>
    <button @click="change">change</button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Child from './Child.vue'

// Teleport 组件，可以将该组件内的 html 模板传送到调用该组件的父组件的任意 DOM 元素下
// to 属性：值为选择器的字符串，为传送目标的 DOM 元素的选择器
// disabled 属性：是否开启传送，值为布尔值，false 为原位置，true 为目标 DOM 元素位置
// <Teleport :to="selector: string" :disabled="flag: boolean"></Teleport>
// 注意：使用组件时，设置的属性为 :prop 自定义属性，才能实现向组件中传值实现功能

const flag = ref<boolean>(true)
const change = () => {
  flag.value = !flag.value
}
</script>
<style scoped lang="less">
.App {
  background-color: #ccc;
  height: 50vh;
  position: relative;
}
</style>
